<template>
  <view class="tab-bar-wrap" :class="{radius:activeIndex !== 2}">
    <scroll-view scroll-x="true" class="tab-bar">
      <view class="tab-item" :class="{active: activeIndex === index}" scroll-with-animation :id="`view-${item.id}`" v-for="(item, index) of tabList" :key="item.id" @click="handleChangeIndex(index)">{{item.title}}</view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  name: 'tabBar',
  props: {
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return{
      tabList: [
        {
          id: 1,
          title: '综合素质'
        },
        {
          id: 2,
          title: '综合成绩'
        },
        {
          id: 3,
          title: '单科成绩'
        },
        {
          id: 4,
          title: '奖惩情况'
        },
        {
          id: 5,
          title: '监护人'
        }
      ],
      activeIndex: 0
    }
  },
  watch: {
    currentIndex: {
      handler: function(index) {
        this.activeIndex = index
      },
      immediate: true
    }
  },
  mounted () {
    const _this = this
    const query = uni.createSelectorQuery().in(this).select('.tab-bar-wrap')
    query.boundingClientRect(data => {
      const height = data.top + data.height
      this.$emit('calcHeight', height)
    }).exec();
  },
  methods: {
    handleChangeIndex(index) {
      this.activeIndex = index
      this.$emit('change', index)
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-bar-wrap{
  width: 100%;
  background-color: #fff;
  height: 114upx;
  .tab-bar{
    // display: flex;
    // overflow: hidden;
    // width: 100%;
    white-space: nowrap;
    padding-left: 20upx;
    box-sizing: border-box;
  }
  .tab-item{
    display: inline-block;
    margin-right: 30upx;
    line-height: 114upx;
    height: 114upx;
    font-size: 32upx;
    color: #999;
    border-bottom: 6upx solid transparent;
    box-sizing: border-box;
    &:nth-of-type(4) {
      margin-right: 40upx;
    }
    &:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
  .active{
    color: #0D84D5;
    border-color: #0D84D5;
  }
}
.radius {
  border-radius:0px 0px 21upx 21upx;
  overflow: hidden;
}
</style>

